<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  </head>
  <body>
    <!-- 注册 -->
    <div id="register">
      <label for="username">用户名:</label>
      <input type="text" id="username" name="username" required />

      <label for="password">密码:</label>
      <input type="password" id="password" name="password" required />

      <label for="full_name">姓名:</label>
      <input type="text" id="full_name" name="full_name" required />

      <label for="phone_number">手机号:</label>
      <input type="tel" id="phone_number" name="phone_number" required />

      <label for="email">邮箱:</label>
      <input type="email" id="email" name="email" required />
      <button id="btn">注册</button>
    </div>

    <script>
      // 注册逻辑
      // 1.获取元素
      let username = document.getElementById("username");
      let password = document.getElementById("password");
      let full_name = document.getElementById("full_name");
      let phone_number = document.getElementById("phone_number");
      let email = document.getElementById("email");
      let btn = document.getElementById("btn");
      // 2.绑定事件
      btn.onclick = function () {
        // 3.获取用户输入的值
        let usernameValue = username.value;
        let passwordValue = password.value;
        let full_nameValue = full_name.value;
        let phone_numberValue = phone_number.value;
        let emailValue = email.value;

        // 4.发送请求
        axios
          .post("http://127.0.0.1:3000/register", {
            username: usernameValue,
            password: passwordValue,
            full_name: full_nameValue,
            phone_number: phone_numberValue,
            email: emailValue,
          })
          .then(function (res) {
            console.log(res);
          })
          .catch(function (err) {
            console.log(err);
          });
      };
    </script>
  </body>
</html>
